import {
  MenuFoldOutlined,
  BellOutlined,
  SettingOutlined,
  MenuUnfoldOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { Dropdown } from "antd";
export default function Header({ handleClick, isFold }) {
  const navigate = useNavigate();
  const clickExit = () => {
    navigate("/", { replace: true });
  };
  const items = [
    {
      key: "1",
      label: <div>个人信息</div>,
    },
    {
      key: "2",
      label: <div>修改密码</div>,
    },
    {
      key: "3",
      label: <div onClick={clickExit}>退出登录</div>,
    },
  ];
  /**
   * 菜单点击事件
   */
  const handleClickMenu = () => {
    handleClick(!isFold);
  };
  return (
    <div className="fixed flex justify-between items-center h-[80px] w-[100%] z-9999">
      {/* 左侧固定部分 */}
      <div className="flex w-[280px] justify-between items-center">
        <h1 className="font-bold text-[22px] pl-[30px]">admin-cli</h1>
        <div className="button-icon" onClick={handleClickMenu}>
          {isFold ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </div>
      </div>
      {/* 右侧部分 */}
      <div className="flex-1 flex justify-end pr-[30px]">
        {/* 右侧右侧部分 */}
        <div className="flex w-[180px] justify-between items-center">
          <div className="button-icon">
            <BellOutlined />
          </div>
          <div className="button-icon">
            <SettingOutlined />
          </div>
          <div>admin</div>
          <Dropdown
            menu={{
              items,
            }}
            placement="bottom"
            arrow={{ pointAtCenter: true }}
            trigger={["click"]}
          >
            <div className="w-[40px] h-[40px] rounded-full bg-[rgb(227,242,253)] flex justify-center items-center cursor-pointer overflow-hidden">
              <img
                src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
                alt="用户头像"
                style={{ width: "100%", height: "100%" }}
              />
            </div>
          </Dropdown>
        </div>
      </div>
    </div>
  );
}
